<div class="layui-card">
    <div class="layui-card-header">
        <h2 class="header-title">用户分布图</h2>
        <span class="layui-breadcrumb pull-right">
          <a href="#!home_console">首页</a>
          <a><cite>用户分布图</cite></a>
        </span>
    </div>
    <div class="layui-body" style="left:0px;height: 90%" id="map"></div>
</div>
<!-- js部分 -->


<script>
    layui.use(['form', 'table', 'util', 'config', 'admin'], function () {
        var $ = layui.jquery;
        var layer = layui.layer;
        var element = layui.element;
        var config = layui.config;
        var index = layui.index;
        var admin = layui.admin;
        var laytpl = layui.laytpl;

    debugger ;

        // layer.load(2);
        //地图
        var map = new ol.Map({
            layers: [
                new ol.layer.Tile({
                    source: new ol.source.XYZ({
                        url: 'http://mt3.google.cn/maps/vt?lyrs=y@189&gl=cn&x={x}&y={y}&z={z}'
                    })
                })

            ],
            target: 'map',
            view: new ol.View({
                center: [96.51, 19.55],
                projection: 'EPSG:4326',
                zoom: 4
            }),
            controls: ol.control.defaults().extend([
                new ol.control.MousePosition()
            ]),

        });


        layer.load(2);
        var source, clusterSource, styleCache = {}, clusters;
        var features = new Array();
        $.ajax({
            url: config.base_server + 'api-log/nginxLog?access_token=' + config.getToken().access_token,
            type: 'get',
            async: false,//使用同步的方式,true为异步方式
            data: {},//这里使用json对象
            success: function (resp) {
                layer.closeAll('loading');
                if (resp.code == 0) {
                    // debugger ;
                    for (i = 0; i < resp.data.length; i++) {
                        var item = resp.data[i];
                        if (item != null && typeof (item) != undefined) {
                            var coordinates = [Number(item.geoip.longitude), Number(item.geoip.latitude)];
                            features.push(new ol.Feature(new ol.geom.Point(coordinates)));
                        }
                    }
                debugger ;
                    //适量数据源
                    source = new ol.source.Vector({
                        //要素
                        features: features
                    });
                    //聚合数据源
                    clusterSource = new ol.source.Cluster({
                        //标注元素之间的间距
                        distance: 40,
                        //数据源
                        source: source
                    });
                    //矢量图层
                    clusters = new ol.layer.Vector({
                        //数据源
                        source: clusterSource,
                        //样式
                        style: function (feature, resolution) {

                            //当前聚合标注数据源的要素大小
                            var size = feature.get('features').length;
                            //定义样式
                            var style = styleCache[size];
                            //如果当前样式不存在则创建
                            if (!style) {
                                style = [
                                    //初始化样式
                                    new ol.style.Style({
                                        //点样式
                                        image: new ol.style.Circle({
                                            //点的半径
                                            radius: 12,
                                            //笔触
                                            stroke: new ol.style.Stroke({
                                                color: '#00FF00'
                                            }),
                                            //填充
                                            fill: new ol.style.Fill({
                                                color: '#00FF00'
                                            })
                                        }),
                                        //文本样式
                                        text: new ol.style.Text({
                                            //文本内容
                                            text: size.toString(),
                                            //填充
                                            fill: new ol.style.Fill({
                                                color: '#FF0000'
                                            })
                                        })
                                    })
                                ];
                                styleCache[size] = style;
                            }
                            return style;
                        }
                    });
                    //将聚合标注图层添加到map中
                    map.addLayer(clusters);

                }
            },
            fail: function () {
                //code here...
            }
        });

    });
</script>
                    